<template>
  <div class="hard-cash">
    <div class="tanking">
      <div class="hardf-title">
        <div class="title">应收账款周转率</div>
        <div class="close-girl" @click="closeButton"></div>
      </div>
      <div ref="chartArea" id="chart-area"></div>
    </div>
  </div>
</template>
<script setup>
import { ref, defineEmits, onMounted } from "vue";
import * as echarts from "echarts";
import { postRequest } from "../utils/request";
const emits = defineEmits(["close-area"]);
const props = defineProps({
  initData: {
    type: Object,
    default: {},
  },
});
let chartArea = ref(null);
let closeButton = () => {
  emits("close-details", false);
};
let initChart = (val, data) => {
  let option = {
    title: {
      text: props.initData.name + "月 应收账款周转率",
      left: "center", // 标题水平居中
      top: 10, // 标题垂直居顶部
      textStyle: {
        color: "#fff", // 标题文字颜色
        fontSize: 16, // 标题文字大小
        fontWeight: "bold", // 标题文字加粗
        fontFamily: "Arial", // 标题文字字体
      },
    },
    tooltip: {
      trigger: "item",
      formatter: function (params) {
        return params.name + " : " + params.value;
      },
      backgroundColor: "#0d62eca9", //设置背景颜色
      borderColor: "rgba(255, 255, 255, 0)",
      textStyle: {
        color: "#fff", // 设置字体颜色为黄色
      },
      borderWidth: 0, // 设置边框宽度为 2px
    },
    grid: {
      left: "3%",
      right: "3%",
      bottom: "2%",
      top: "16%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: val,
      axisLabel: {
        color: "#FFFFFF", // 设置 X 轴标签颜色
        fontSize: 12, // 设置 X 轴标签字体大小
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "#fff", // 设置底部轴线（X 轴）颜色为橙色
        },
      },
    },
    yAxis: {
      type: "value",
      name: "单位: %",
      nameLocation: "end", // 单位显示在 Y 轴顶端
      nameTextStyle: {
        color: "#FFFFFF",
        fontSize: 14,
      },
      axisLabel: {
        color: "#FFFFFF", // 设置 X 轴标签颜色
        fontSize: 12, // 设置 X 轴标签字体大小
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#ADADAD",
        },
      },
    },
    series: {
      data,
      type: "bar",
      barWidth: 24,
      itemStyle: {
        color: "#FFA500",
      },
    },
  };
  const chart = echarts.init(chartArea.value);
  chart.setOption(option);
};

onMounted(() => {
  postRequest("/screen/query/getCwYskQy", { startTime: props.initData.name })
    .then(({ code, data }) => {
      if (code == 200) {
        let list = [];
        let dataes = [];
        list = data.map((item) => {
          return item.qyzxmc;
        });
        dataes = data.map((item) => {
          return item.yzzkzzl;
        });
        initChart(list, dataes);
      } else {
        initChart([], []);
      }
    })
    .catch((error) => {
      console.error("请求失败:", error);
    });
});
</script>
<style lang="less" scoped>
.hard-cash {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  .tanking {
    width: 35vw;
    height: 41vh;
    background: #2f5892e0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .hardf-title {
    width: 34vw;
    height: 7vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-family: Dream Han Sans CN;
    font-weight: normal;
    font-size: 1.4vw;
    color: #ffffff;
    text-shadow: 0px 3px 7px rgba(1, 4, 8, 0.66);
    opacity: 0.97;
    border-bottom: #32d7e9c0 1px solid;
    .title {
      width: 80%;
    }
    .close-girl {
      width: 44px;
      height: 44px;
      background: url("../assets/close.png") no-repeat;
      background-size: 100% 100%;
      background-position: center;
    }
  }
  #chart-area {
    width: 35vw;
    height: 33.5vh;
  }
}
</style>
